<template>
  <view class="wrap">
    <video
      class="videoPlayer"
      id="videoPlayer"
      :src="filePath"
      controls
      @ended="onEnded"
      @timeupdate="onTimeUpdate"
      @loadedmetadata="onLoadedmetadata"
      object-fit="fill"
      :title="mediaName"
    />
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

import { getVideoUrlBySportId } from './video.api'
import { onLoad } from '@dcloudio/uni-app'
let videoContent: any = null
const videoList = ref<any>([])
const filePath = ref<string>('')
const fileIndex = ref<number>(0)
const mediaName = ref<string>('')

const options = reactive({
  source: '',
  list: []
})
onLoad(async (option: any) => {
  console.log(option)
  options.source = option.source
  options.list = JSON.parse(decodeURIComponent(option.list))
  console.log(options.list)
  videoList.value = options.list
  filePath.value = videoList.value[fileIndex.value].fileUrl
  mediaName.value = videoList.value[fileIndex.value].mediaName

  uni.setNavigationBarTitle({
    title: mediaName.value
  })
  videoContent = uni.createVideoContext('videoPlayer', this)
})

const onEnded = () => {
  if (fileIndex.value < videoList.value.length - 1) {
    fileIndex.value++
    filePath.value = videoList.value[fileIndex.value].fileUrl
    mediaName.value = videoList.value[fileIndex.value].mediaName
  } else {
    videoContent.pause()
    console.log('end')
    uni.navigateBack({
      delta: 1
    })
    // uni.redirectTo({
    //   url: `/module/src/pages/sports/sportsPlan/${options.source}`
    // })
  }
}

const onTimeUpdate = (e: any) => {
  //
  // console.log('currentTime', Math.round(e.detail.currentTime * 100) / 100)
}
const onLoadedmetadata = () => {
  // console.log('loaded', videoContent)
  setTimeout(() => {
    videoContent.play()
  }, 200)
}
</script>
<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: 0.8);

  .videoPlayer {
    width: 100%;
  }
}
</style>
